<template>
  <div class="logincom">
    <!-- submit.prevent:阻止提交事件的刷新页面这种默认行为 -->
    <form @submit.prevent="login()">
    <fieldset>
        <h2>登录界面</h2>
        <div class="box">
          <p class="iconfont icon-yonghu-copy">
            <input type="text" placeholder="账号" required v-model="username"/>
          </p>
          <p class="iconfont icon-yonghu-mimaguanli">
            <input type="password" placeholder="密码" required v-model="pwd"/>
          </p>
          <p class="ji">
            <!-- 可选功能：如果勾选，在浏览器内保存上一次的登陆账号和登录密码；如果没有勾选，不保存登录信息的同时还需要清除上一次记录的数据 -->
          <input type="checkbox" v-model="isRem"/>
          <span>记住密码</span>      
          </p>
          <!-- 在form标签内的时候都只执行提交submit事件 -->
          <p>
            <input type="submit" value="登录"/>
            <!-- <button> 在form标签内的时候</buttom> -->
            </p>
            <p>
                <router-link :to="{name : 'RegisterCom'}">前往注册</router-link>
            </p>
        </div>
    </fieldset>
    </form>
  </div>
</template>

<script>
// import { mapMutations } from 'vuex';

export default {
    name : "LoginCom",
    //存储组件的数据
    data(){
        return{
            // objA:{
            username : '',//用v-model将输入框的value值直接赋值给username变量
            pwd : '',
            isRem : false, //false:默认不勾选
            // }
        }
    },
  created() {
    // 页面加载时，检查是否有保存的登录信息
    const savedUsername = localStorage.getItem("loginuser");
    const savedPassword = localStorage.getItem("loginpwd");
    const savedRem = localStorage.getItem("loginRem");

    if (savedUsername && savedPassword && savedRem === "true") {
      this.username = savedUsername;
      this.pwd = savedPassword;
      this.isRem = true;
    }
  },
    //加载完成之后
    // mounted(){
    //     //上一次登录时记住密码的状态
    //     let isremmeber = localStorage.getItem('loginRem');
    //     console.log(isremmeber);//字符串数据/null

    //     // //判断上一次是否记住密码
    //     this.username = isremmeber=='true' ? localStorage.getItem('loginuser') : '';
    //     this.pwd = isremmeber=='true' ? localStorage.getItem('loginpwd') : '';
    //     this.isRem = isremmeber=='true' ? true : false;
    // },
    //methods对象：存储事件函数
    methods:{
        //扩展运算符
        // ...mapMutations(['user']),
        //登录函数：从vuex里面获取注册的数据：根据手机号码和密码查找对应用户，完成登录并存储信息
        login(){
            // const user = [
            //     {username : 'admin1' , pwd : '123456'},
            //     {username : 'admin2' , pwd : '987654'},
            //     {username : 'admin3' , pwd : '123789'},
            //     {username : 'admin4' , pwd : '987321'},
            //     {username : 'admin5' , pwd : '654321'},
            // ];
            //1.根据输入框输入的账号密码，如果输入的数据跟上面数组中的任意一组数组匹配，我们认为登录成功；
            //2.跳转到首页
            //循环遍历
            // user.forEach((item,index)=>{
            //     if(this.username==item.username && this.pwd==item.pwd){
            //         let str = user[index]
            //         sessionStorage.setItem('user',JSON.stringify(str));
            //         //编程式导航
            //         this.$router.push('/home');
            //         return;
            //     }
            // })

            const users = this.$store.state.user;
            // 查找匹配的用户
            const foundUser = users.find(
                (user) =>
                user.username === this.username && user.password === this.pwd
                );
                if (foundUser) {
                    // 登录成功
                    this.$store.commit("setLoginStatus", true);
                    this.$router.push("/home");
                    // 处理“记住密码”逻辑
                    if (this.isRem) {
                        // 保存登录信息到 localStorage
                        localStorage.setItem("loginuser", this.username);
                        localStorage.setItem("loginpwd", this.pwd);
                        localStorage.setItem("loginRem", this.isRem);
                        } else {
                            // 清除 localStorage 中的登录信息
                            localStorage.removeItem("loginuser");
                            localStorage.removeItem("loginpwd");
                            localStorage.removeItem("loginRem");
                            }
                            
                    // 将登录状态保存到 sessionStorage
                sessionStorage.setItem("islogin", this.username);
                } else {
                // 登录失败
                alert("用户名或密码错误");
                }


            // //过滤函数filter：设置一个过滤条件，如果有符合的数据存储到新数组内
            // let result  = users.filter( item=>{
            //     //return出过滤的条件（判断条件）
            //     return item.username == this.username && item.pwd == this.pwd
            // });
            // console.log(result);

            // // 判断是否登录成功            
            // if(result.length >0){
            //     //在登陆成功的前提下，判断是否需要记住密码
            //     if(result.length > 0){
            //         if(this.isRem){
            //             //本地存储记录本次登陆成功的账号和密码，本次记录密码的状态
            //             localStorage.setItem('loginuser',this.username);
            //             localStorage.setItem('loginpwd',this.pwd);
            //             localStorage.setItem('loginRem',this.isRem);
            //         }else{
            //             //将上一次存储到本地存储的登录账号和密码，上一次的记录密码状态进行清除
            //             localStorage.clear();
            //         }
            //     }
                
            //     sessionStorage.setItem("islogin",this.username);
            // //     //编程式导航
            // //      this.$router.push('/home');
            // // }else{
            // //     alert('登录失败')
            // // }
            // }
        }
    }
}
</script>

<style scoped>
/* .logincom{
    width: 100%;
    height: 98vh;
    overflow: hidden;

} */
 .logincom{
    color: red;
 }
.logincom fieldset{
    border: 5px solid #008b8b;
    width: 50%;
    margin-top: 50%;
    padding-block-end: 2%;
    margin: auto;
    position: absolute;
    left: 25%;
    top: 30%;
}
.logincom h2{
    padding-top: 1%;
    font-weight: bold;
}
.logincom p{
    padding-top: 2%;

}
.logincom h2{
    text-align: center;
}
.logincom p{
    text-align: center;
}
.box input{

    border: none;
    outline: none;
    padding: 10px;
}
.ji{
    margin-right: 30%;
}

</style>